<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/view/common/kendocommon.jsp"%>

<!DOCTYPE html>
<html>
<head>
<title>评论回复</title>
<meta charset="utf-8">
<style>
table {
	/* font-size: 12px */
}
td {
	text-align: center;
}
td span{
font-size:15px
}
#frame{
 margin-left:20px
}


/* .product_name{
	font-size:32px;
}
.product_name_div{
	height:85px;overflow:hidden
}
.product_price{
	font-size:28px;
} */

.product_name{
	font-size:24px;
}
.product_name_div{
	height:60px;overflow:hidden
}
.product_price{
	font-size:22px;
}

.item{
border:3px solid #ACACAC;width:185px;height:185px;text-align: center;margin:5px;float:left;border-radius:5px;
}
.td_first{
width:80px;padding: 5px 0 5px 0
}
.td_second{
width:120px;padding: 5px 0 5px 0
}
.base_span_b{
font-size:25px;vertical-align:middle
}
.base_span{
font-size:20px;vertical-align:middle
}
.base_span_s{
font-size:15px;
}
.number_div{
/* float:left;padding-left:30px; */
position:absolute;bottom:10px;left:30px
}
.page_div{
/* float:right;padding-right:30px; */
position:absolute;bottom:10px;right:30px;
}

</style>
<script>
var page=1;
var pageSize=8;
var totalPage=1;
var totalData;
	$(document).ready(function() {
			$("#toolbar").kendoToolBar({
					resizable : false,
					items : [
							{
								type : "separator"
							},
							{
								template : "<label>商品名字</label><input name='product_name' id='product_name' class='k-textbox'>"
							},
							{
								template : "<label>商品代码</label><input name='product_code' id='product_code' class='k-textbox'>"
							},
							{
								template : "<label>业务类型</label><input name='business' id='business'>"
							},
							{
								type : "separator"
							}, {
								type : "button",
								text : "查询",
								click : queryInfo
							} ]
						});
												
					    $("#product_name").blur(function(){
					    	queryInfo();
					  });
					    $("#product_code").blur(function(){
					    	queryInfo();
					  });
						
						var name="${param.name}";
						if(name!=null&&name!=''){
							$('#product_name').val(name);
						}
						
						var address=spera.spera_consume+ "/consumeBackground/getProductList2";						
				
						var business = new kendo.data.DataSource({
							transport : {
								read : {
									url : spera.sperachildrenpark_path
											+ "/common/getBusinessTypeCode2",
									dataType : "jsonp",
									data : function() {
										return {
											type : '1'
										}
									}
								}
								
							}
							

						});
						$("#business").kendoComboBox({
							dataSource : business,
							dataTextField : "name",
							dataValueField : "code"
						});
						
/* 						$("#item11 div:last input:last").kendoComboBox({
							dataSource : business,
							dataTextField : "name",
							dataValueField : "code"
						}); */
						

						createItem(page,pageSize);
						
						$("#number").kendoNumericTextBox({
						    min: 0,
						   // decimals: 1,
						    format: "0",
						    value: 1
						});

					});
	

	var createItem=function(page,pageSize){
	
		$.ajax({
			 	url: spera.spera_consume+"/consumeBackground/getProductList2",    //请求的url地址
			 	dataType: "jsonp",   //返回格式为json
			 	async: true, //请求是否异步，默认为异步，这也是ajax重要特性
			 	data:{
					"kids_park_id" : "04428ed2-a555-11e5-8ece-1051721d3a6c",
					"name" : $('#product_name').val(),
					"code" : $('#product_code').val(),
					"deptID" : '${param.deptID}',
					"businessTypeCode":$('#business').val(),
					"page":page,
					"pageSize":pageSize
			 		},
			 	//type: "jsonp",   //请求方式
			 	success: function(data) {
			 	//移除已有元素
			 	$("#frame").children().remove();	
			 		
			 	totalData=data.data;
			 	
			 	var temp=0;
				
			 	console.log(data.data.length);
			 	
			 		//画九宫格
				for(var i=1;i<3;i++){
					//横九宫格
					for(var j=1;j<5;j++){
						if(temp<data.data.length){
							
						
					//竖九宫格
						var itemData=data.data[temp];
					
						var item=$("#item_model").clone();
						
						$(item).find(".product_name").html(itemData.name);
						$(item).find(".product_price").html("￥:"+itemData.unitPrice+"元");
						$(item).find("tr:first td:first").html(itemData.business_type);
						$(item).find("tr:first td:last").html(itemData.code);
						$(item).find("tr:last td:first").html(itemData.isDiscount2+"打折");
						$(item).find("tr:last td:last").html("库存:"+itemData.remainQuantity);
						
						$(item).attr('id','item'+temp);
						
						if(itemData.promotion.length==0){
							$(item).find("[name='promotion_div']").remove();
						}else{
							
							$(item).find("#promotion").kendoComboBox({
								dataSource: {
									data : itemData.promotion
								  },												
								dataTextField : "promotionTest",
								dataValueField : "discountPrice"
							});
						}
						
						$("#frame").append(item);	
						temp++;
						
						}
					}
					
					$("#frame").append($("<div style='clear:both'></div>"));
				}
			 		 totalPage=Math.ceil(data.total/pageSize);
			 		 
			 		 
						//点击事件						
						$('.item').click(function(e){
				      //  alert('item is click!');
				       // console.log(this);				        
				        var itemID=$(this).attr('id');			        
				        var numStr=itemID.substring(4); 
				        var itemNum=Number(numStr)+1;
						
				        clickItem(itemNum);
				        				        
				      });
						
						//$("[name='promotion']").click(function(e){
						$('.promotion').click(function(e){
							e.stopPropagation(); 
					      });
						
 
				//$("#frame").append(item);
				$("#page").html("当前第 "+page+" 页");		
				$("#totalPage").html("总页数："+totalPage+" 页   ");	
				
				
				if(page==1){
					$('#lastPage').css('visibility','hidden');
				}else{
					$('#lastPage').css('visibility','visible');
				}
				
				if(page==totalPage){
					$('#nextPage').css('visibility','hidden');
				}else{
					$('#nextPage').css('visibility','visible');
				}
				
			},
			error:function(req) {												
			}
		});
	}
	

/* 	var addItems = function(e) {
		var grid = $("#grid").data("kendoGrid");
		var data = grid.dataItem($(e.currentTarget).closest("tr"));

		if (data.quantity == null) {
			alert('请输入数量');
			return false;
		}

		parent.tcaddItem(data);
	} */

	var queryInfo = function(e) {
		createItem(page,pageSize);
	}
	
	var clickItem=function(itemNum){
		var item=totalData[itemNum-1];
		
		var itemNow=itemNum-1;

		var promotion=$('#item'+itemNow).find("[name='promotion']").val();
		
		//alert(promotion);
		
		//优惠
		var promotion2=new Object();
		promotion2.promotionTest=promotion;			
		item.promotion2=promotion2;
		
		item.quantity=$('#number').val();
		
		parent.tcaddItem(item);
	}
	var left=function(){
		if(page>1){
			page--;
		}	
		queryInfo();
	}
	

	var right=function(){
	
	if(page<totalPage){
		page++;
	}	
	queryInfo();
	}

	document.onkeydown=function(event){ 
		var e = event || window.event || arguments.callee.caller.arguments[0]; 
		
		console.log(e.keyCode);
		
		var itemNum=0;
		
		if(e.keyCode==13){
			queryInfo();
			//判定数字键
		}else if( e.keyCode>=97&&e.keyCode<= 105){		
			itemNum=e.keyCode-96;
		}else if(e.keyCode>=49&&e.keyCode<= 57){
			itemNum=e.keyCode-48;
			
		}else if(e.keyCode==37){
			//按了左键			
			left();			
		}else if(e.keyCode==39){
			//按了右键			
			right();
		}else if(e.keyCode==38){
			//按了上键
			
			var number=$('#number').data("kendoNumericTextBox").value();
			number++;
			$('#number').data("kendoNumericTextBox").value(number);
			
		}else if(e.keyCode==40){
			//按了下键
			
			var number=$('#number').data("kendoNumericTextBox").value();
			if(number>0){
				number--;
				$('#number').data("kendoNumericTextBox").value(number);
			}

		}
		

		
		//当判断用户按了数字键时
		if(itemNum>0&&totalData.length>=itemNum){
			//被选中的数据
		//	clickItem(itemNum);
		}
		


	}
	


	
</script>

</head>
<body>

	<div id="toolbar" style="margin:2px"></div>
	<div id="frame">
		
	</div>

	<div style="display:none">
		<div class="item" id="item_model">
			<div class="product_name_div">
				<span class="product_name"></span>
			</div>
			<div>
				<span class="product_price"></span>
			</div>
			<div>
				<table>
					<tr>
						<td class="td_first"><span></span></td>
						<td class="td_second"><span></span></td>
					</tr>
					<tr>
						<td class="td_first"><span></span></td>
						<td class="td_second"><span></span></td>
					</tr>
				</table>
			</div>
			<div name="promotion_div">
				<span class="base_span_s">促销: </span> <input class="promotion" name="promotion" id='promotion' style="width:120px"/>
			</div>
		</div>
	</div>
	
	<div style="clear:both"></div>
	
	<div class="number_div">
		<span class="base_span">数量: </span><input id="number"></input>
	</div>

	<div class="page_div">
		<a id="lastPage" onclick="left()"><span class="base_span_b">上一页</span></a>
			<span id="page" class="base_span"></span>
		<a id="nextPage" onclick="right()"><span class="base_span_b">下一页</span></a>
			<span id="totalPage" class="base_span"></span>
	</div>

</body>
</html>
